<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //获取项目路径，并设置进"app_path"
    pageContext.setAttribute("app_path", request.getContextPath());
    pageContext.setAttribute("myInterface", "\"http://localhost:9002/user-curd/users\"");
%>



<div class="col-lg-10">

    <div class="page-header" style="margin-top: -20px;margin-bottom: 5px;">
        <h2>用户管理列表</h2>
    </div>

    <!--用户处理框-->
    <div class="panel panel-default">
        <div class="panel-body">
            <!--搜索栏-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">~~名称：
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">查询</button>
                </form>
            </div>

            <!--添加按钮-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                <button class="btn btn-success" id="saveBtn">添加用户</button>

                <!--表格-->
                <%-- 用于显示用户信息的表格 --%>
                <table id="user_curd_table" class="table table-hover table-bordered table-striped">
                    <caption></caption>
                    <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="user_check_all">
                        </th>
                        <th>id</th>
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>密码</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>

                    </tbody>
                </table>

            </div>
        </div>

        <!--分页栏-->
        <nav aria-label="Page navigation">
            <ul class="pager">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <!--消息提示框-->
    <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
        <strong>删除成功：</strong>当前数据以被删除！
    </div>
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
        <strong>删除失败：</strong>java.lang.RuntimeException 删除数据无效！
    </div>
</div>
</div>


<!--添加用户对话框-->
<div class="modal fade" id="saveUserModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">保存用户信息</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!--修改用户对话框-->
<div class="modal fade" id="updateUserModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">编辑用户信息</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //定义一些全局变量
//    let totalRecords;
//    let errInputClass = "has-error";

    //加载页面后进行的操作
    $(function () {
        //发送跳转请求到用户表第1页
        to_page(1);
        //绑定按钮点击事件
        bindOnEvent();

    });


    //该方法用于跳转到页面并查询
    function to_page(pn) {
        $.ajax({
            url: ${myInterface},//非Rest
            data: "pn=" + pn,
            type: "get",
            <%--url: "${app_path}/user-curd/users/"+pn,//伪Rest--%>
            <%--type: "GET",--%>
            //请求成功后的回调函数
            //result是请求成功后返回的Json结果
            success: function (result) {
                // 构建用户表
                build_user_table(result);
                // // 构建构建页数信息条
                // build_page_info(result);
                // // 构建分页导航条
                // build_user_nav(result);
            }
        });
    }

    //该方法用于构建用户数据表
    function build_user_table(result) {
        let $userTable = $("#user_curd_table tbody");
        $userTable.empty();//添加前需要先清空

        let userList = result.dataMap.pageInfo.list;//用户的信息表
        let tableSize = result.dataMap.pageInfo.pageSize;//数据表每行的数量
        let createNums = 0;//当前已创建数据行的数量

        //Jquery里的$.each()遍历中，index代表当前遍历的索引，item代表当前遍历的数据
        $.each(userList, function (index, item) {
            // showMsg = showMsg + index+":"+ item.id+":"+item.username+"\n";
            let $checkbox = $("<input type='checkbox' class='user_check_item'/>");//创建选框
            let $checkboxTd = $("<td></td>").append($checkbox);//创建选框格并加入选框
            let $userIdTd = $("<td></td>").append(item.id);//创建id格并加入id数据
            let $roleNameTd = $("<td></td>").append(item.username);//创建用户名格并加入用户名数据
            let $nicknameTd = $("<td></td>").append(item.username);//创建昵称格并加入昵称数据
            let $passwordTd = $("<td></td>").append(item.password);//创建密码格并加入密码数据
            let $emailTd = $("<td></td>").append(item.email);//创建邮箱格并加入邮箱数据
            let $updateBtn = $("<button class=\"btn btn-primary btn-sm\">修改</button>");
            $updateBtn.click(function () {//给修改按钮设置点击事件
                $("#updateUserModal").modal({//弹出模态框
                    backdrop: "static"
                });
            });
            let $deleteBtn = $("<button class=\"btn btn-danger btn-sm\" style='margin-left: 10px;'>删除</button>");
            let $operationTd = $("<td></td>").append($updateBtn).append($deleteBtn);//创建操作格并加入操作按钮

            let $userTr = $("<tr></tr>")//创建用户数据行并加入各种数据格子
                .append($checkboxTd)
                .append($userIdTd)

                .append($roleNameTd)
                .append($nicknameTd)
                .append($passwordTd)
                .append($emailTd)
                .append($operationTd);

            $userTable.append($userTr);//将数据行加入表格中
            createNums++;//已创建数据行的数量加1
        })

        //构造空数据行
        for ( let i = createNums; i < tableSize ; i++) {
            let $userTr = $("<tr></tr>");//创建用户数据行并加入各种数据格子
            for (let j = 0; j < 7; j++) {
                let $nullTd = $("<td>&nbsp;</td>");//创建选框
                $userTr.append($nullTd);//加入选框
            }
            $userTable.append($userTr);//将数据行加入表格中
        }
    }

    //该方法用于构建页数信息条
    function build_page_info(result) {
        let $pageInfo = $("#page_info");
        $pageInfo.empty();//先清空"页数信息条"里的信息

        let pageNum = result.dataMap.pageInfo.pageNum;//当前页码
        let pageSize = result.dataMap.pageInfo.pageSize;//页容量
        let pages = result.dataMap.pageInfo.pages;//总页数
        let total = result.dataMap.pageInfo.total;//总数据量
        totalRecords = total;

        let $pageInfoP = $("<span></span>").append(
            "当前页:" + pageNum + "&nbsp;&nbsp;" +
            "页显示量:" + pageSize + "&nbsp;&nbsp;" +
            "总页数:" + pages + "&nbsp;&nbsp;" +
            "总数据量:" + total);

        $pageInfo.append($pageInfoP);//再往"页数信息条"里添加信息
    }

    //该方法用于构建分页导航条
    function build_user_nav(result) {
        let $navUl = $("#page_nav");//找到需要被添加的导航栏对象
        $navUl.empty();//添加前需要先清空

        let pageNum = result.dataMap.pageInfo.pageNum;//当前页码
        let pageSize = result.dataMap.pageInfo.pageSize;//页容量
        let pages = result.dataMap.pageInfo.pages;//总页数
        let total = result.dataMap.pageInfo.total;//总数据量
        let isFirstPage = result.dataMap.pageInfo.isFirstPage;//是否是首页的标识
        let isLastPage = result.dataMap.pageInfo.isLastPage;//是否是尾页的标识
        let navigatepageNums = result.dataMap.pageInfo.navigatepageNums;//导航栏要显示的数字们

        let $firstPageLi = $("<li></li>").append(
            $("<a></a>").append("首页").attr("href", "#")
        );
        let $prePageLi =
            $("<li></li>").append(
                $("<a></a>").append(
                    $("<span></span>").append("&laquo;")
                ).attr("href", "#")
            );

        let $nextPageLi =
            $("<li></li>").append(
                $("<a></a>").append(
                    $("<span></span>").append("&raquo;")
                ).attr("href", "#")
            );
        let $lastPageLi = $("<li></li>").append(
            $("<a></a>").append("尾页").attr("href", "#")
        );

        //如果是首页，则有两个按钮不能点击
        if (isFirstPage) {
            $firstPageLi.addClass("disabled");//第一页li添加disabled的class
            $firstPageLi.find("a").removeAttr("href");//找到第一页li下的a标签并清除属性

            $prePageLi.addClass("disabled");//前一页li添加disabled的class
            $prePageLi.find("a").removeAttr("href");//找到前一页li下的a标签并清除href属性
        } else {
            $firstPageLi.click(function () {
                to_page(1);
            });
            $prePageLi.click(function () {
                to_page(pageNum - 1);
            });
        }

        //如果是尾页，则有两个按钮不能点击
        if (isLastPage) {
            $lastPageLi.addClass("disabled");//最后页li添加disabled的class
            $lastPageLi.find("a").removeAttr("href");//找到最后页li下的a标签并清除属性

            $nextPageLi.addClass("disabled");//后一页li添加disabled的class
            $nextPageLi.find("a").removeAttr("href");//找到后一页li下的a标签并清除href属性
        } else {
            $lastPageLi.click(function () {
                to_page(pages);
            });
            $nextPageLi.click(function () {
                to_page(pageNum + 1);
            });
        }

        //添加"首页"按钮
        $navUl.append($firstPageLi);
        //添加"上一页"按钮
        $navUl.append($prePageLi);
        //遍历添加所有要显示的页码
        $.each(navigatepageNums, function (index, item) {
            let $numLi = $("<li></li>").append(
                $("<a></a>").append(item).attr("href", "#")
            );
            //如果目前的页码真的与遍历页码相等
            if (pageNum == item) {
                $numLi.addClass("active");
                $numLi.empty();//清除里面能点击的a标签
                $numLi.append(
                    $("<span></span>").append(item).append(
                        $("<span></span>").addClass("sr-only")
                    )
                );
            }
            //设置显示的页码格子的点击事件
            $numLi.click(function () {
                to_page(item);
            });

            $navUl.append($numLi);//将每一个要显示的页码加入导航栏中
        });
        //添加"下一页"按钮
        $navUl.append($nextPageLi);
        //添加"尾页"按钮
        $navUl.append($lastPageLi);
    }

    /**
     * 该方法用于清除错误提示
     */
    function clearUserForm() {
        let $username_add_input = $("#username_add_input");
        let $password_add_input = $("#password_add_input");
        let $email_add_input = $("#email_add_input");
        //移除所有的错误提示样式
        $username_add_input.parent().removeClass(errInputClass);
        $username_add_input.next("span").empty();
        $password_add_input.parent().removeClass(errInputClass);
        $password_add_input.next("span").empty();
        $email_add_input.parent().removeClass(errInputClass);
        $email_add_input.next("span").empty();
    }


    /**
     * 该方法用于检查用户添加表格
     */
    function checkUserForm() {
        let $username_add_input = $("#username_add_input");
        let $password_add_input = $("#password_add_input");
        let $email_add_input = $("#email_add_input");

        let username_input = $username_add_input.val();
        let username_reg = /^([A-Za-z0-9_-]){6,20}$/;
        let username_hint = "用户名必须为6-20位的英文字符或数字!";
        let password_input = $password_add_input.val();
        let password_reg = /^[A-Za-z0-9]{6,20}$/;
        let password_hint = "密码必须为6-20位的英文字符或数字!";
        let email_input = $email_add_input.val();
        let email_reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        let email_hint = "邮箱格式错误!";

        let result = true;

        //开始时移除所有的错误提示样式
        clearUserForm();

        if (!username_reg.test(username_input)) {//若不匹配，显示提示
            $username_add_input.parent().addClass(errInputClass);
            $username_add_input.next("span").append(username_hint);
            result = false;
        } else {
            result = result & true;
        }
        if (!password_reg.test(password_input)) {//若不匹配，显示提示
            $password_add_input.parent().addClass(errInputClass);
            $password_add_input.next("span").append(password_hint);
            result = false;
        } else {
            result = result & true;
        }
        if (!email_reg.test(email_input)) {//若不匹配，显示提示
            $email_add_input.parent().addClass(errInputClass);
            $email_add_input.next("span").append(email_hint);
            result = false;
        } else {
            result = result & true;
        }

        return result;
    }


    function showErrorToFrom(result){
        //先清除错误提示
        clearUserForm();

        let $username_add_input = $("#username_add_input");
        let $password_add_input = $("#password_add_input");
        let $email_add_input = $("#email_add_input");

        if (result.dataMap.fieldErrors.username != undefined) {//若不匹配，显示提示
            $username_add_input.parent().addClass(errInputClass);
            $username_add_input.next("span").append(result.dataMap.fieldErrors.username);
        }
        if (result.dataMap.fieldErrors.password != undefined) {//若不匹配，显示提示
            $password_add_input.parent().addClass(errInputClass);
            $password_add_input.next("span").append(result.dataMap.fieldErrors.password);
        }
        if (result.dataMap.fieldErrors.email != undefined) {//若不匹配，显示提示
            $email_add_input.parent().addClass(errInputClass);
            $email_add_input.next("span").append(result.dataMap.fieldErrors.email);
        }
    }


    /**
     * 该方法用于给控件绑定事件
     */
    function bindOnEvent() {

        $('#saveBtn').click(function () {
            $('#saveUserModal').modal({
                show: true,
                backdrop: 'static'
            });
        });

        $('#updateBtn').click(function () {
            $('#updateUserModal').modal({
                show: true,
                backdrop: 'static'
            });
        });

        //绑定弹出模态框的点击事件
        $("#add_user_btn").click(function () {
            //调用html元素的清除表单数据方法
            $("#add_user_form")[0].reset();
            //清除错误提示
            clearUserForm();
            //弹出模态框
            $("#addUserModal").modal({
                backdrop: "static"
            });
        })

        //绑定删除按钮的点击事件
        $("#delete_user_btn").click(function () {
            let deleteData = [2,125019,125020];

            $.ajax({
                url: "http://localhost:9002/user-curd/users",
                data: "idList="+deleteData,
                type: "DELETE",
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    if (result.code == 200){
                        alertUtil.message(result.msg,"success");
                    }else {
                        alertUtil.message(result.msg,"danger");
                    }
                    //跳转到第一页
                    to_page(1);
                }
            });
        })

        //给各输入框添加焦点模糊事件
        let $username_add_input = $("#username_add_input");
        let $password_add_input = $("#password_add_input");
        let $email_add_input = $("#email_add_input");
        $username_add_input.bind("input propertychange", function () {
            checkUserForm();
        });
        $password_add_input.bind("input propertychange", function () {
            checkUserForm();
        });
        $email_add_input.bind("input propertychange", function () {
            checkUserForm();
        });

        //绑定测试的按钮的点击事件
        $("#test1_btn").click(function () {
            alertUtil.message("我是弹出框的显示的结果"); // 直接调用commonUtil对象的message方法
        });

        //绑定添加用户的按钮的点击事件
        $("#user_add_confirm").click(function () {
            //使用jq自带的序列化方法直接将表格中的数据取出
            let userData = $("#add_user_form").serialize();
            // alert(userData);

            if (checkUserForm()) {//如果检查表格成功checkUserForm()
                $.ajax({
                    url: "${app_path}/user-curd/users",
                    data: userData,
                    type: "POST",
                    //请求成功后的回调函数
                    //result是请求成功后返回的Json结果
                    success: function (result) {
                        //判断保存的状态，200为成功，400为失败
                        if (result.code == 200) {
                            //关闭模态框
                            $("#addUserModal").modal("hide");
                            //来到最后一页
                            to_page(totalRecords);
                            //提示保存成功
                            alertUtil.message(result.msg,"success");
                        } else {
                            console.log(result);

                            // 查看是否有后端回传的详细错误提示
                            if (result.dataMap.fieldErrors != undefined){
                                //将失败的提示显示到模态框上
                                showErrorToFrom(result);
                            }else{
                                // 关闭模态框
                                $("#addUserModal").modal("hide");
                                //提示保存失败
                                alertUtil.message(result.msg,"danger");
                            }
                        }
                    }
                });
            }
        })

        //绑定全选框的点击事件
        $("#user_check_all").click(function () {
            //用.prop()函数来获取或修改dom原生的属性
            let nowCheckAll = $(this).prop("checked");
            $(".user_check_item").prop("checked",nowCheckAll);
        });

        //绑定单行数据选框的点击事件 ( on(事件,选择器,方法) 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素)
        $(document).on("click",".user_check_item",function(){
            //选中的数量和全部可选中的数量是否相等的标识
            let isCheckAll = $(".user_check_item:checked").length == $(".user_check_item").length;
            $("#user_check_all").prop("checked",isCheckAll);
        });
    }

</script>

